import { appStore } from '@renderer/store/modules/app'
import { defineComponent, ref } from 'vue'
import GameBoard from './GameBoard'
import { Modal } from 'ant-design-vue'
import SettingModal from './SettingModal'
import RecordModal from './RecordModal'

const skills = [
  { label: '交换', value: 'switch' },
  { label: '消除', value: 'remove' }
]

export default defineComponent({
  name: 'Home',
  setup () {
    const { initGame, handleBack, handleEnd } = appStore
    const endGame = () => {
      Modal.confirm({
        title: '系统提示',
        content: `游戏得分为 ${appStore.gameScore}, 确定要结束?`,
        onOk () {
          handleEnd()
        }
      })
    }
    const currentSkill = ref<string | null>(null)
    /* render 函数 */
    return () => {
      const { gameScore, power, canUseSkill, canBack, isGameStart } = appStore
      const btns = isGameStart
        ? (<>
          <a-button type="primary" onClick={ endGame }>结束游戏 (E)</a-button>
          <a-button
            class="ml-2"
            disabled={ !canBack }
            onClick={ handleBack }>
            上一步 (B)
          </a-button>
        </>)
        : <a-button type="primary" onClick={ initGame }>开始游戏 (G)</a-button>
      const powerOrSkill = canUseSkill
        ? (<div class="mb-2">
          <a-radio-group v-model={[currentSkill.value, 'value']}>
            { skills.map(item => (<a-radio-button value={ item.value }>{ item.label }</a-radio-button>))}
          </a-radio-group>
        </div>)
        : <a-progress class="w-full mb-2" percent={ power } />
      return (<>
        <div class="w-screen h-screen flex-center">
          <div>
            <div class="text-gray-500 text-3xl mb-2">游戏得分: { gameScore }</div>
            { isGameStart && powerOrSkill }
            <GameBoard currentSkill={ currentSkill.value } />
            <div class="mt-2 text-center">
              { btns }
            </div>
          </div>
        </div>
        <SettingModal />
        <RecordModal />
      </>)
    }
  }
})
